<template>
	<view class="mgt20" v-if="dataList">
		<view class="shopBox" v-for="i in dataList" :key="i._id" @click="topage(i.brandId[0]._id)">
			<view class="shopImg">
				<image :src="i.thum[0].path" mode="aspectFill" class="shopImg"></image>
			</view>
			<view class="mgl20 w100 flex column jcsb">
				<text class="lm2 titleName">{{ i.name }}</text>
				<view>
					<text class="fs28 c9 cityLimit">{{ i.dsc }}</text>
				</view>
				<view class="flex jcsb w100 mgt20">
					<text class="cr fs32 cityLimit">￥{{ i.money }}</text>
					<!-- <u-icon name="shopping-cart" color="#2979ff" size="28" @click="addShop"></u-icon> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { showToast } from '../../utils/showModel.js';
defineProps({
	dataList: {
		type: Array,
		default: []
	}
});

function topage(id) {
	console.log(id);
	uni.navigateTo({
		url: '/pages/shop/shopDetail?id=' + id
	});
}

function addShop() {
	uni.showModal({
		title: '是否添加该商品到购物车?',
		successL: function () {
			showToast('已添加至购物车');
		}
	});
}
</script>

<style lang="scss">
.shopBox {
	display: flex;
	padding: 15rpx;

	.titleName {
		font-size: 30rpx;
	}

	.money {
		float: right;
		margin-top: 8rpx;
	}

	.shopImg {
		width: 180rpx;
		height: 180rpx;
	}

	.cityLimit {
		width: 350rpx;
		display: inherit;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
